<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function drawTop(ctx, fillStyle){
    ctx.fillStyle = fillStyle;
    ctx.beginPath();
    ctx.arc(0,0,30,0,Math.PI,true);
    ctx.closePath();
    ctx.fill();
}
function drawGrip(ctx){
    ctx.save(); 
    ctx.fillStyle = "blue";
    ctx.fillRect(-1.5, 0, 1.5, 40);
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.arc(-5, 40, 4, Math.PI,Math.PI*2,true);
    ctx.stroke();
    ctx.closePath();
    ctx.restore(); 
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.translate(150,150);
for (var i=1;i<9;i++){
	ctx.save();
	ctx.rotate(Math.PI*(2/4+i/4));
	ctx.translate(0,-100);
	drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
	drawGrip(ctx);
	ctx.restore();
}


</script>
</body>
</html> 
